<!--
 * @Author: chentao 294446993@qq.com
 * @Date: 2023-04-06 09:50:05
 * @LastEditors: chentao 294446993@qq.com
 * @LastEditTime: 2023-04-13 10:32:31
 * @FilePath: \vue3-pc-app\src\components\VueAtComponent.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="container">
        <h3>div的contenteditable @某人</h3>
        <div class="msg-item" ref="msgItem" @contextmenu="onContextMenu">
            假设这是回复的这条消息99999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999
        </div>
        <vue-tribute :options="options">
            <div ref="textarea" id="content-editable" class="edit-textarea" contenteditable="plaintext-only"
                @input="valueChange" placeholder="@..."></div>
        </vue-tribute>
        <br />
        <div class="footer">
            <el-button v-bind:onclick="btnSendMsg">发送消息</el-button>
        </div>
    </div>
</template>
<script>
import VueTribute from "vue-tribute";
import ContextMenu from "@imengyu/vue3-context-menu";
export default {
    components: {
        VueTribute
    },
    mounted() {
        // 注册光标移动事件
        document.addEventListener('selectionchange', this.HandleSelectionChange, false);
    },
    data() {
        return {
            //输入选项
            options: {
                trigger: "@",
                // specify whether a space is required before the trigger string
                requireLeadingSpace: false,
                noMatchTemplate: "<li>暂无数据</li>",
                values: [
                    { key: "张三 zhangsan", value: "张三" },
                    { key: "李四 lisi", value: "李四" },
                    { key: "王五 wangwu", value: "王五" },
                    { key: "周杰伦 zhoujielun", value: "周杰伦" }
                ],
                positionMenu: true,
                selectTemplate: function (item) {
                    console.log("选择的item", item)
                    return (
                        '<span contenteditable="false" class="at-tribute">' +
                        "@" +
                        item.original.value +
                        "</span>"
                    );
                }
            },
            //https://blog.csdn.net/C_fashionCat/article/details/120737287
            savedRange:null  // 保留当前选择的范围
        };
    },
    methods: {
        // 保留当前选择的范围
        HandleSelectionChange() {
            let sel = window.getSelection && window.getSelection();
            if (sel && sel.rangeCount) {
                this.savedRange = sel.getRangeAt(0);
            }
        },
        noMatchFound() {
            console.log("暂无数据");
        },
        //当输入框输入的时候 
        valueChange(e) {
            console.log(e.target.innerHTML, e.target.textContent);
            // this.textContent = e.target.textContent;
            // this.innerHTML = e.target.innerHTML;
            //this.insertTextAtCursor(e.target.textContent)
        },
        insertTextAtCursor(text) {
            console.log("text", text)
            const selft = window.getSelection()
            console.log("rangeCount", selft.rangeCount)
            if (selft.getRangeAt && selft.rangeCount) {
                const range = selft.getRangeAt(0)
                range.deleteContents()
                console.log("插入点前", window.getSelection().anchorNode) //起始点位置
                console.log("插入点前", window.getSelection().focusOffset)//末尾点位置
                // input @xxx 
                //range.insertNode(document.createTextNode(text))
                //console.log("插入点后",window.getSelection().anchorNode) //起始点位置
                //console.log("插入点后",window.getSelection().focusOffset)//末尾点位置

            }
        },
        //右键
        onContextMenu(ev) {
            // 阻止默认行为
            ev.preventDefault();
            const _menus = [
                {
                    label: '回复',
                    onClick: (v) => {
                        let replyContent = this.$refs.msgItem.innerText
                        const replyMsgDom = document.createElement("div")
                        const sendNameDom = document.createElement("div")
                        sendNameDom.innerText = "用户名" + ":\n"
                        sendNameDom.setAttribute("contenteditable", "false")
                        const replyMsgContentDom = document.createElement("div")
                        replyMsgContentDom.innerText = replyContent
                        replyMsgContentDom.style.webkitLineClamp = '2'
                        replyMsgContentDom.style.boxOrient = 'vertical'
                        //replyMsgContentDom.style.display = '-webkit-box' //会影响省略号
                        replyMsgContentDom.style.textOverflow = 'ellipsis'
                        replyMsgContentDom.style.whiteSpace = 'nowrap'
                        replyMsgContentDom.style.width = '80%'
                        replyMsgContentDom.style.overflowX = "hidden"
                        replyMsgContentDom.setAttribute("contenteditable", 'false')
                        replyMsgDom.appendChild(sendNameDom)
                        replyMsgDom.appendChild(replyMsgContentDom)
                       
                        replyMsgDom.style.backgroundColor = '#F0F2F5'
                        replyMsgDom.style.borderRadius = '2px'
                        replyMsgDom.style.opacity = 1
                        replyMsgDom.style.paddingTop = '4px'
                        replyMsgDom.style.paddingLeft = '11px'
                        replyMsgDom.setAttribute("contenteditable","true") 
                        this.$refs.textarea.appendChild(replyMsgDom)
                        const br = document.createElement("br")
                        this.$refs.textarea.appendChild(br)
                        // this.$refs.textarea.appendChild(br)
                        this.$refs.textarea.focus()
                        //this.pasteHtmlAtCaret(replyMsgDom.innerHTML)

                    }
                }
            ];
            ContextMenu &&
                ContextMenu.showContextMenu({
                    x: event.x,
                    y: event.y,
                    zIndex: 3,
                    minWidth: 100,
                    items: _menus,
                });
        },

    
        //发送消息
        btnSendMsg() {

        }
    }
};
</script>
<style lang="css" scoped>
.container {
    background-color: red;
    cursor: default;
}
.msg-item{
     
}
.content-editable {
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
}

.at-tribute {
    z-index: 999;
}

.edit-textarea {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
        "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    height: 116px;
    overflow-y: auto;
    padding: 5px 10px 0;
    font-size: 14px;
    border: 0 none;
    outline: none;
    background-color: green;
}

.footer {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
</style>